﻿@{
    ViewBag.Title = "Index";
}

@section scripts {
    <script src="~/Scripts/metadata.js"></script>
    <script src="~/Scripts/Entity/_Main.js"></script>
    <script type="text/javascript">
        var manager = createEntityManager('Breeze/Data');
        viewModel.categories = ko.observableArray();
        viewModel.questions = ko.observableArray();
        viewModel.answers = ko.observableArray();
        viewModel.selectedCategories = ko.observableArray([1, 2, 3]);

        viewModel.questionsdetail = ko.observableArray();
        viewModel.answersdetail = ko.observableArray();
        var query = new breeze.EntityQuery().from("Categories").where('CatId','==',null);
        manager.executeQuery(query).then(function (data) {
            data.results.forEach(function (item) {
                item.id = item.Id();
                item.text = item.Name();
                if (item.SubCategories().length > 0) {
                    item.state = 'closed';
                }                
            });
            viewModel.categories(data.results);
        }).fail(function (e) {
            alert(e);
        });

        $(function () {
            //viewModel.selectedCategories([1, 2, 3]);           
            ko.applyBindings(viewModel, $('#west')[0]);

        });
        function check() {
            var node = $('#bb').combotree('tree').tree('getSelected');
            alert(node.text);
            $('#bb').combotree('tree').tree('append', {
                parent: node.target,
                data: [{
                    id: '111',
                    text: 'data',
                    state: 'closed'
                }]
            });
        }


    </script>
    <script type="text/javascript" src="~/Scripts/Entity/Category.js"></script>
    <script type="text/javascript" src="~/Scripts/Entity/Question.js"></script>
    <script type="text/javascript" src="~/Scripts/Entity/Answer.js"></script>

}

@section west {
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="addCategory()" data-options="iconCls:'icon-add'">Add</div>
    <div onclick="addChild()" data-options="iconCls:'icon-add'">Add Child</div>
    <div onclick="removeCategory()" data-options="iconCls:'icon-remove'">Remove Category</div>
</div>

<div class="easyui-accordion" data-options="fit: true">
        <div title="Category" data-options="iconCls:'icon-search', collapsible: false" style="height: 60px;">
            <select  id="categoryList"
                    data-options="fit:true,
                    onContextMenu: function(e,node){
                        e.preventDefault();
                        $(this).tree('select',node.target);
                        $('#mm').menu('show',{
                        left: e.pageX,
                        top: e.pageY
                        });
                    }"
                    multiple style="width: 210px"
                    data-bind="combotree: {data: categories()}"></select>
        </div>
    <div title="Question Bank" data-options="tools:[{
                                                    iconCls:'icon-add',
                                                    handler: viewModel.addQuestion},
                                                    {
                                                    iconCls:'icon-redo',
                                                    handler: viewModel.copyQuestion
                                                    }]">
        <ul id="qq" class="easyui-tree" data-bind="tree: questions"></ul>
    </div>
        <div title="Answer Bank" data-options="tools:[{
                                                    iconCls:'icon-add',
                                                    handler: viewModel.addAnswer
                                                    },{
                                                    iconCls:'icon-redo',
                                                    handler: viewModel.copyAnswer
                                                    }]">
            <ul id="aa" class="easyui-tree" data-bind="tree: answers"></ul>
        </div>

</div>
    
}

@section center_south {
<div id="tabans" data-bind="attr: {title: Title}" data-options="fit: true, closable:true" style="display:none">
    <table id="answerDetail" cellspacing="0" cellpadding="10" style="width: 100%">
        <tr>
            <td style="width: 100px; vertical-align: top">
                Categories:
                <select id="bb"
                        data-options="fit:true"
                        multiple style="width: 180px"
                        data-bind="combotree: {data: categories(), onCheck: function (node, checked) {
                        if (checked && selectedcategory.indexOf(node.id) < 0) {
                            selectedcategory.push(node.id);
                        }
                        if(!checked && selectedcategory.indexOf(node.id) >= 0){
                            selectedcategory.remove(node.id);
                        }
                        } } , optionsText: 'text',optionsValue: 'id' , selectedItems: selectedcategory"></select>
                Used in Questions:
                <a href="#" data-bind="click: removeQuestion" >remove</a>
                <select id="dd" size="6" style="width: 180px" data-bind="options: QuestionAnswers, optionsText: 'Title', optionsValue: 'QuestionId'"></select>
                State <span data-bind="text: state"></span>
            </td>
            <td style="vertical-align: top; padding: 10px;">
                <table cellspacing="0" cellpadding="0" style="width: 100%">
                    <tr>
                        <td style="vertical-align: top; width: 100px;">Title</td>
                        <td><input type="text" style="width: 400px" data-bind="value: Title" /></td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 100px;">Text</td>
                        <td><textarea rows="4" style="width: 100%" data-bind="tinymce: Text"></textarea></td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 100px;">Feedback</td>
                        <td><textarea rows="4" style="width: 100%" data-bind="tinymce: Feedback"></textarea></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
    <div id="tablist2">

</div>
}
    <div id="tablist"  data-options="fit: true">                
</div>

<div id="tabs" data-bind="attr: {title: Title}" data-options="closable:true, tools:[{
                                                    iconCls:'icon-mini-edit',
                                                    handler: viewModel.addQuestion}]" style="display:none">
    <table cellspacing="0" cellpadding="10" style="width: 100%;">
        <tr>
            <td style="width: 100px; vertical-align: top">
                Categories:
                <select id="bb"
                        data-options="fit:true"
                        multiple style="width: 180px"
                        data-bind="combotree: {data: categories(), onCheck: function (node, checked) {
                    if (checked && selectedcategory.indexOf(node.id) < 0) {
                        selectedcategory.push(node.id);
                    }
                    if(!checked && selectedcategory.indexOf(node.id) >= 0){
                        selectedcategory.remove(node.id);
                    }
                    }, onBeforeExpand: function (node) {
                        exploreNode(node, true, 'bb');
                    }
                    } , optionsText: 'text',optionsValue: 'id' , selectedItems: selectedcategory"></select>
                Answers:
                <a href="#" data-bind="click: removeAnswer">remove</a>
                <select id="cc" size="6" style="width: 180px" data-bind="options: QuestionAnswers, optionsText: 'Title', optionsValue: 'AnswerId'"></select>
                <span data-bind="text: state"></span>
            </td>
            <td style="vertical-align: top; padding: 10px;">
                <table cellspacing="0" cellpadding="0" style="width: 100%">
                    <tr>
                        <td style="vertical-align: top; width: 100px;">Title</td>
                        <td><input type="text" style="width: 400px" data-bind="value:Title" /></td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 100px;">Text</td>
                        <td><textarea rows="4" style="width: 100%" data-bind="tinymce:Text"></textarea></td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 100px;">Feedback</td>
                        <td><textarea rows="4" style="width: 100%" data-bind="tinymce:Feedback"></textarea></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>



